<template>
	<view class="">
		<image class="bg" src="/static/user/loginBg.png"></image>
		<view class="box">
			<view class="title">欢迎登录</view>
			<view class="sub">PDF雷达锁</view>
			<view class="login">
				<view class="input">
					<input v-model="phone" type="number" maxlength="11" placeholder="账号" />
				</view>
				<view class="input flex">
					<input class="pass" v-model="pass" :password='passStatus' placeholder="密码" />
					<u-icon name="eye-off" color="#444" size="40rpx" @click="checkPass" v-if="!passStatus"></u-icon>
					<u-icon name="eye" color="#444" size="40rpx" @click="checkPass" v-if="passStatus"></u-icon>
				</view>
			</view>
			<button @click="login">登录</button>
			<view class="mt-40 flex flexJusCenter">
				<view @click="register">注册</view>
				<view class="xian"></view>
				<view @click="forgetPassword">忘记密码</view>
			</view>
			<view class="mt-40 flex flexJusCenter" v-if="iswexin">
				<u-icon name="weixin-circle-fill" color="#1cab43" size="100rpx" @click="weChatLogin"></u-icon>
			</view>
			<view class="agree flex flexJusCenter mt-40">
				<radio :checked="agreeStatus" color="#F87985" @click="change"></radio>
				<view>请先阅读和同意<span class="subjectColor" @click="privacyPolicy">《隐私策略》</span></view>
			</view>
		</view>
		
		<u-popup :show="showBindWeChat" mode="center" customStyle="width:90%" @close="close" round="20">
			<view class="bind">
				<view class="bindTitle">请先绑定微信账户</view>
				<button class="bindBtn"  @click="bindWeChat">去绑定</button>
			</view>
		</u-popup>
		<u-popup :show="showBindMobile" mode="center" customStyle="width:90%" @close="closeMobile" round="20">
			<view class="bind">
				<view class="bindTitle">请先绑定手机号</view>
				<view class="flex bindPhone mb-40">
					<input placeholder="请输入手机号码" type="number" maxlength="11" v-model="mobile" />
					<text class="ml-20 authCode" @click="code()">{{btnMsg}}</text>
				</view>
				<view class="flex bindPhone mb-40">
					<input placeholder="请输入验证码" type="number" v-model="authcode" />
				</view>
				<button class="bindBtn"  @click="bindMobile">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passStatus: true,
				phone: '',
				pass: '',
				iswexin: false,
				showBindWeChat: false,
				type:'',
				showBindMobile:false,
				btnMsg: '发送验证码',
				time: '',
				mobile:'',
				authcode:'',
				agreeStatus:false
			}
		},
		onShow() {
			
		},
		onLoad() {
			this.iswexin = this.isWechat()
			if (this.iswexin) {
				this.checkWeChatCode()
			}
		},
		methods: {
			privacyPolicy(){
				uni.navigateTo({
					url:'/pages/login/privacyPolicy'
				})
			},
			agreement(){
				uni.navigateTo({
					url:'/pages/login/agreement'
				})
			},
			change(){
				this.agreeStatus = !this.agreeStatus
			},
			code(){
				if (!(/^1\d{10}$/).test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				let data={
					mobile:this.mobile,
					event:'bindmobile'
				}
				this.api.post('api/sms/send',data).then((res)=>{
					if(res.code == 200){
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						this.time = 60;
						let t = setInterval(() => {
							if (this.time > 0) {
								this.btnMsg = this.time + "s后获取";
								this.time--;
							} else {
								this.btnMsg = "获取验证码";
								this.time = 60;
								clearInterval(t);
							}
						}, 1000);
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			bindMobile(){
				if (!(/^1\d{10}$/).test(this.mobile)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				if(!this.authcode){
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				let data={
					mobile:this.mobile,
					captcha:this.authcode
				}
				this.api.post('api/user/bindMobile',data).then((res)=>{
					if(res.code == 200){
						this.showBindMobile = false
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						setTimeout(()=>{
							uni.switchTab({
								url: '/pages/user/user'
							})
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			closeMobile(){
				this.showBindMobile = false
			},
			close() {
				this.showBindWeChat = false
			},
			bindWeChat() {
				let appID = 'wx8c4c36ed99558d3a'
				let callBack = 'https://m.pdfjm.com/#/pages/login/login?type=' + 'bind'
				let url =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appID + '&redirect_uri=' + encodeURIComponent(callBack) +
					'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
				
				window.location.href = url
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				let code = this.getUrlCode('code')
				let type = this.getUrlCode('type')
				if (code) {
					uni.showLoading({
						title: '正在登陆...'
					})
					if (type) {
						this.bind(code)
					} else {
						this.getOpenidAndUserinfo(code)
					}
				}
			},
			bind(code) {
				let data = {
					code: code
				}
				this.api.post('api/wechat/authBind', data).then(res => {
					if (res.code == 200) {
						console.log(res)
						uni.hideLoading()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/user/user'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.hideLoading()
					}
				})
			},
			getOpenidAndUserinfo(code) {
				let data = {
					code: code
				}
				this.api.post('api/wechat/authLogin', data).then(res => {
					if (res.code == 200) {
						console.log(res)
						uni.hideLoading()
						uni.setStorageSync('token', res.data.userinfo.token)
						if(res.data.userinfo.mobile == null){
							this.bindMobile()
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(()=>{
								uni.switchTab({
									url: '/pages/user/user'
								})
							},500)
						}
					} else {
						uni.hideLoading()
					}
				})
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			weChatLogin() {
				if (!this.agreeStatus) {
					uni.showToast({
						title: '请同意隐私策略',
						icon: 'none'
					})
					return
				}
				let appID = 'wx8c4c36ed99558d3a'
				let callBack = 'https://m.pdfjm.com/#/pages/login/login'
				let url =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
					appID + '&redirect_uri=' + encodeURIComponent(callBack) +
					'&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'

				window.location.href = url
			},
			checkPass() {
				this.passStatus = !this.passStatus
			},
			register() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			},
			forgetPassword() {
				uni.navigateTo({
					url: '/pages/login/forgetPassword'
				})
			},
			login() {
				if (!this.agreeStatus) {
					uni.showToast({
						title: '请同意隐私策略',
						icon: 'none'
					})
					return
				}
				if (!this.phone) {
					uni.showToast({
						title: '请输入账号',
						icon: 'none'
					})
					return
				}
				if (!this.pass) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title: '正在登陆...'
				})
				let data = {
					account: this.phone,
					password: this.pass,
				}
				this.api.post('api/user/login', data).then((res) => {
					uni.hideLoading()
					if (res.code == 200) {
						console.log(res)
						uni.setStorageSync('token', res.data.userinfo.token)
						if(this.iswexin){
							if (res.data.userinfo.unionid == null) {
								this.showBindWeChat = true
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/user/user'
									})
								}, 1000)
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/user/user'
								})
							}, 1000)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.agree{
		font-size: 28rpx;
	}
	radio{
		transform:scale(0.7)
	}
	.bindPhone{
		background: #f7f7f7;
		padding: 25rpx 20rpx;
		border-radius: 10rpx;
	}
	.bindPhone input{
		flex: 1;
	}
	.authCode {
		font-size: 28rpx;
		color: #EB4146;
	}
	.bindBtn{
		border-radius: 15rpx;
		background: #EB4146;
	}
	.bind {
		padding: 40rpx 40rpx 80rpx 40rpx;
	}

	.bindTitle {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 80rpx;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
	}

	.box {
		background: rgba(255, 255, 255, 0.8);
		position: absolute;
		left: 0;
		right: 0;
		margin: 50% 40rpx;
		border-radius: 40rpx;
		padding: 40rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: 700;
		color: #000;
	}

	.sub {
		font-size: 24rpx;
		color: #353535;
		margin-top: 20rpx;
	}

	.login {
		margin-top: 70rpx;
	}

	.input {
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50rpx;
		padding: 25rpx 40rpx;
		margin: 40rpx 0;
	}

	.pass {
		flex: 1;
		margin-right: 40rpx;
	}

	button {
		background: #F87985;
		color: #fff;
		border-radius: 50rpx;
	}

	.xian {
		width: 3rpx;
		height: 27rpx;
		background: #353535;
		margin: 0 40rpx;
	}
</style>